src/components/MaintainerCard.tsx (1)

45-49: LGTM! Badge styling applied consistently.

The change successfully applies a pill-shaped badge style to Contributor and Consultant roles, matching the visual pattern of Creator and Maintainer badges while using a distinct gray color scheme. The removal of the dark mode text variant is appropriate since the other role badges also use fixed background colors that work in both themes.

Optional: Verify color contrast for accessibility.

While bg-gray-500 (#6B7280) with text-white should provide adequate contrast (approximately 5.7:1), you may want to verify it meets WCAG AA standards for small text.

🎨 Optional: Verify WCAG contrast

Run the following script to check the color contrast ratio:

#!/bin/bash
# Description: Calculate WCAG contrast ratio for gray-500 background with white text

python3 << 'EOF'
def relative_luminance(rgb):
    """Calculate relative luminance for RGB color"""
    rgb_norm = [c / 255.0 for c in rgb]
    rgb_linear = [
        c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
        for c in rgb_norm
    ]
    return 0.2126 * rgb_linear[0] + 0.7152 * rgb_linear[1] + 0.0722 * rgb_linear[2]

def contrast_ratio(rgb1, rgb2):
    """Calculate WCAG contrast ratio between two RGB colors"""
    l1 = relative_luminance(rgb1)
    l2 = relative_luminance(rgb2)
    lighter = max(l1, l2)
    darker = min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

# Tailwind gray-500: `#6B7280`, white: `#FFFFFF`
gray_500 = (107, 114, 128)
white = (255, 255, 255)

ratio = contrast_ratio(gray_500, white)
print(f"Contrast ratio: {ratio:.2f}:1")
print(f"WCAG AA (normal text ≥4.5:1): {'✓ Pass' if ratio >= 4.5 else '✗ Fail'}")
print(f"WCAG AA (large text ≥3:1): {'✓ Pass' if ratio >= 3.0 else '✗ Fail'}")
print(f"WCAG AAA (normal text ≥7:1): {'✓ Pass' if ratio >= 7.0 else '✗ Fail'}")
EOF

Expected result: The contrast ratio should be ≥4.5:1 for WCAG AA compliance.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/MaintainerCard.tsx` around lines 45 - 49, The badge styling in
MaintainerCard (the span rendering {role} with className on the <span> in the
MaintainerCard component) is fine, but verify the bg-gray-500/text-white
contrast for small text meets WCAG AA (≥4.5:1) by running the provided contrast
check; if it falls short, update the className used in MaintainerCard (and any
other role badges using bg-gray-500) to a darker gray utility (e.g., bg-gray-600
or bg-gray-700) so the contrast ratio reaches ≥4.5:1, keeping the pill shape and
text-white intact.